<template>
  <div id="myChart" :style="{width: '100%', height: '600px'}" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";

import { getOverviewChart } from "@/api/dashboard/statistical";

export default {
  mixins: [resize],
  name: "mycharts",
  components: {},
  data() {
    return {};
  },
  created() {
    setTimeout((_) => {
      this.getOverviewData();
    }, 600);
  },
  methods: {
    getOverviewData() {
      getOverviewChart().then((response) => {
        const xAxisData = response.data.xAxisData;
        // 基于准备好的dom，初始化echarts实例
        let chart = echarts.init(
          document.getElementById("myChart"),
          "macarons"
        );

        var option = {
          title: {
            left: "center",
            text: "近7天数据走势统计",
          },
          legend: {
            left: "center",
            bottom: "0",
            data: ["新增用户", "新增孩子", "激活用户", "导入用户"],
          },
          grid: {
            left: "3.5%",
            right: "2%",
            bottom: "25",
            containLabel: true,
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            // type: 'category',
            data: xAxisData,
            onZero: false,
          },

          yAxis: [
            {
              max: function (value) {
                return parseInt(value.max) + 8;
              },
              min: 0,
              nameTextStyle: {
                padding: [0, 35, 0, 20],
              },
              type: "value",
            },
          ],
          series: [
            // data: res.data.data.series_data
            {
              name: "新增用户",
              type: "line",
              smooth: true,
              data: response.data.newVisitor,
            },
            {
              name: "新增孩子",
              type: "line",
              smooth: true,
              data: response.data.newChild,
            },
            {
              name: "激活用户",
              type: "line",
              smooth: true,
              data: response.data.activatedUser,
            },
            {
              name: "导入用户",
              type: "line",
              smooth: true,
              data: response.data.importUser,
            },
            // {
            //   name: "活跃用户",
            //   type: "line",
            //   smooth: true,
            //   data: response.data.loginUser,
            // },
          ],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
        };

        chart.setOption(option);
      });
    },
  },
};
</script>
  
